<%-- 
    Document   : index
    Created on : Jun 26, 2009, 1:42:13 PM
    Author     : dongxu
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
         <title>Testing Prototype</title>
        <script src="prototype.js"></script>
        <style>
            #container div, #container span
            {
                width: 150px;
                height: 150px;
                display: block;
                float: left;
                border: 1px solid black;
            }
            #container .highlight
            {
                border: 3px solid orange;
            }
            p
            {
                clear: left;
            }
            p input
            {
                display: block;
            }
        </style>
        <script>
            function test_byid()
            {
                $("second").toggleClassName("highlight");
            }

            function test_byclass()
            {
                $$(".test").each(function(elmt) { elmt.toggleClassName("highlight") });
            }

            function test_bytag()
            {
                $$("span").each(function(elmt) { elmt.toggleClassName("highlight") });
            }

            function test_byfirstresult()
            {
                $$("span:first-child").each(function(elmt) { elmt.toggleClassName("highlight") });
            }

            function test_byfunction()
            {
                $$("span:not(#second)").each(function(spanobj) {
                  spanobj.toggleClassName("highlight");
                });
            }

            document.observe('dom:loaded', function() {
                alert('DOM is loaded!');
            });


            document.observe('dom:loaded', function() {
                $("myclicker").observe("click", function() { alert('Clicked!'); });
            });
        </script>

    </head>
    <body>

        <div id="container">
            <span>SPAN<br />No id</br />No class</span>
            <span class="test" id="second">SPAN<br />id="second"</br />class "test"</span>
            <div class="test">DIV<br />No id</br />class "test"</div>
        </div>
        <p>
            <strong>Toggles:</strong>
            <input type="button" onClick="javascript:test_byid();" value="id='second'" />
            <input type="button" onClick="test_byclass();" value="class='test'" />
            <input type="button" onClick="test_bytag();" value="tag is 'span'" />
            <input type="button" onClick="test_byfirstresult();" value="the first object where tag is 'span'" />
            <input type="button" onClick="test_byfunction();" value="tag is 'span', but id is not 'second'" />
            <div id="myclicker">Click me!</div>
        </p>

    </body>

</html>

